<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省表发送数据异常日志列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<div class="demoTable">
    状态：
    <div class="layui-inline">
        <select class="layui-select" name="id" id="demoReload" autocomplete="off">
            <option value="">全部</option>
            <option value="0">未处理</option>
            <option value="1">已处理完成</option>
            <option value="2">处理失败</option>
        </select>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>

<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,method:'post'
            ,contentType: 'application/json'
            ,url: '/list' //数据接口
            ,page: true //开启分页
            ,id: 'testReload'
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'methodName', title: '方法名', width:150}
                ,{field: 'tableName', title: '第三方数据表名', width:200}
                ,{field: 'returnData', title: '异常返回'}
                ,{field: 'postTime', title: '发送数据时间', width: 250}
                ,{field: 'state', title: '状态', width: 120, sort: true,
                    templet: function(res){
                        if (res.state == 0) {
                            return "未处理"
                        } else if (res.state == 1) {
                            return "已处理完成"
                        } else {
                            return "处理失败"
                        }
                    }
                 }
                ,{field: 'createTime', title: '创建时间', width: 200, sort: true}
                ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(test)', function(obj){
            if(obj.event === 'retry'){
                let str = {"methodName":obj.data.methodName,"postTime":obj.data.postTime};
                $.ajax({
                    url:'/retry',
                    type:'post',
                    contentType: 'application/json',
                    data:JSON.stringify(str),
                    success:function(data){
                        if(data.status == 'error'){
                            layer.msg(data.msg,{icon: 5});//失败的表情
                            o.removeClass('layui-btn-disabled');
                            return;
                        }else{
                            layer.msg(data.msg, {
                                icon: 6,//成功的表情
                                time: 3000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                location.reload();
                            });
                        }
                    }
                });
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        state: demoReload.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="retry">重试</a>
</script>
<style>
    .demoTable {
        padding-left: 32px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .layui-table-page {
        text-align: center;
    }
</style>
</body>
</html>